<template>
    <div class="container">
        <div class="box">
            <div class="top">
                <div>
                    <van-icon name="share" size="30px" @click="fanhui" />
                    <span>课程结束</span>
                </div>
            </div>
            <div class="content">
                <div class="content-top">
                    <div>
                        <div>
                            <div id="chart"></div>
                            <div>27/29</div>
                        </div>
                        <div>
                            <p><span class="span-1"></span>&emsp;正常(21人)&emsp;<span>72.4%</span></p>
                            <p><span class="span-1"></span>&emsp;迟到(6人)&emsp;<span>20.7%</span></p>
                            <p><span class="span-1"></span>&emsp;未到(2人)&emsp;<span>20.7%</span></p>
                        </div>
                    </div>
                    <div class="top1"></div>
                    <div></div>
                </div>
                <van-row>
                    <van-col span="3">序</van-col>
                    <van-col span="7">学生姓名</van-col>
                    <van-col span="7">签到状态</van-col>
                    <van-col span="7">操作</van-col>
                </van-row>
            </div>
            <div class="bottom">
                <van-row v-for="item in kechengdata">
                    <van-col span="3">{{ item.id }}</van-col>
                    <van-col span="7">{{ item.name }}</van-col>
                    <van-col span="7">{{ item.id%2 === 0? '已签到':'未签到' }}</van-col>
                    <van-col span="7">
                        <span class="span-kaishi">已结束</span>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref, onMounted, onBeforeMount } from 'vue'
import { kechengApi } from '@/api/adminAPi';
import adminStore from '@/store/admin'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
const router = useRouter();
const myadminStore = adminStore()
const kechengdata = ref([])
const teacherdata = ref({})
onMounted(() => {
    var myChart = echarts.init(document.getElementById('chart'));
    myChart.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '人数统计',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 21, name: '正常', itemStyle: { color: 'skyblue' } },
                    { value: 6, name: '迟到', itemStyle: { color: 'yellow' } },
                    { value: 2, name: '未到', itemStyle: { color: '#F89AD8' } },
                ]
            }
        ]
    });
})
onBeforeMount(async () => {
    myadminStore.setUserInfo(false)
    let ret = await kechengApi()
    if (ret.code === 0) {
        kechengdata.value = ret.data
        teacherdata.value = ret.teacher
    }
})
const fanhui = () => {
    router.push('/');
    myadminStore.setUserInfo(true)
}
</script>
<style lang='scss' scoped>
.span-kaishi {
    padding: 3px 8px;
    background-color: #E6E9ED;
    color: white;
    border-radius: 5px;
}

.container {

    .box {
        padding: 10px;

        .top {
            position: sticky;
            top: 0;
            background-color: #FFFFFF;

            div {
                height: 50px;
                display: flex;
                align-items: center;

                z-index: 1;
                opacity: 1;

                .van-icon {
                    transform: scaleX(-1);
                }

                span {
                    font-size: 20px;
                    font-weight: 600;
                }
            }
        }

        .content {
            .content-top {
                width: 95%;
                height: 150px;
                border-radius: 10px;
                position: relative;
                overflow: hidden;
                padding: 10px 8px;
                background-color: white;
                margin-bottom: 30px;
                box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

                div {
                    &:nth-child(1) {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        div {
                            &:nth-child(1) {
                                position: relative;

                                div {
                                    &:nth-child(1) {
                                        width: 150px;
                                        height: 150px;
                                        z-index: 2;
                                    }
                                    &:nth-child(2) {
                                        position:absolute;
                                        top:65px;
                                        left:55px;
                                    }
                                }
                            }

                            &:nth-child(2) {
                                font-size: 15px;

                                p {
                                    &:nth-child(1) {
                                        span {
                                            &:nth-child(1) {
                                                display: inline-block;
                                                width: 10px;
                                                height: 10px;
                                                background-color: skyblue;
                                                border-radius: 50%;
                                            }

                                            &:nth-child(2) {
                                                color: #E6E9ED;
                                            }
                                        }
                                    }

                                    &:nth-child(2) {
                                        span {
                                            &:nth-child(1) {
                                                display: inline-block;
                                                width: 10px;
                                                height: 10px;
                                                background-color: yellow;
                                                border-radius: 50%;
                                            }

                                            &:nth-child(2) {
                                                color: #E6E9ED;
                                            }
                                        }
                                    }

                                    &:nth-child(3) {
                                        span {
                                            &:nth-child(1) {
                                                display: inline-block;
                                                width: 10px;
                                                height: 10px;
                                                background-color: #F89AD8;
                                                border-radius: 50%;
                                            }

                                            &:nth-child(2) {
                                                color: #E6E9ED;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:nth-child(3) {
                        width: 200px;
                        height: 100px;
                        background-color: #F9DF71;
                        position: absolute;
                        right: -60px;
                        bottom: -50px;
                        border-radius: 50%;
                        z-index: 1;
                    }
                }

                .top1 {
                    width: 200px;
                    height: 100px;
                    background-color: #30E2F2;
                    position: absolute;
                    left: -20px;
                    top: -50px;
                    border-radius: 50%;
                    z-index: 1;
                }
            }

            .van-row {
                background-color: #6CB6FF;
                font-size: 18px;
                color: #e8dddd;
                height: 50px;
                font-weight: 500px;
                position: sticky;
                top: 60px;
                z-index: 3;

                :deep(.van-col) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .bottom {
            .van-row {
                font-size: 18px;
                color: black;
                height: 50px;
                font-weight: 500px;

                :deep(.van-col) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                &:nth-child(even) {
                    background-color: #E9F4FF;
                }
            }
        }
    }
}
</style>